<template>
    <xh-pages>
        <view class="pages-container">
            <view class="form-container">
                <view class="title">信息收集</view>
                <view class="item">
                    <view class="label">反馈意见</view>
                    <view class="value">
                        <textarea placeholder="请输入反馈意见" v-model="formData.content" class="w-input" cols="30"
                            rows="2"></textarea>
                    </view>
                </view>
                <view class="item">
                    <view class="label">联系方式</view>
                    <view class="value">
                        <input placeholder="请填写微信号或联系手机" v-model="formData.contact" class="w-input" />
                    </view>
                </view>
            </view>
            <view class="form-container">
                <view class="action">
                    <button class="w-button" @tap="onSubmit">提交反馈</button>
                </view>
            </view>
        </view>
    </xh-pages>
</template>
  
<script setup lang="ts">
import { useSite } from '@/stores/site'
import { toast } from '@/utils/helpers'

const siteInfo = storeToRefs(useSite()).siteInfo

const formData = ref({
    content: '',
    contact: ''
})

// 提交
const onSubmit = () => {
    uni.$u.http.post('Report/form', formData.value).then((res: any) => {
        toast(res?.msg ?? '网络错误', {
            success: () => {
                setTimeout(() => {
                    uni.navigateBack()
                }, 1500);
            }
        })
    })
}
</script>
  
<style lang="scss" scoped>
.pages-container {

    .form-container {
        background: #fff;
        padding: 30rpx;
        margin-top: 30rpx;

        .title {
            font-size: 32rpx;
            font-weight: 700;
        }

        .item {
            display: flex;
            flex-direction: column;
            padding-top: 30rpx;

            .label {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
            }

            .value {
                padding: 20rpx 0;

                .tips {
                    font-size: 24rpx;
                    color: #666;
                }

                .w-input {
                    width: 100%;
                    display: block;
                    border: none;
                    outline: none;
                    font-size: 26rpx;
                    color: #333;
                    border-bottom: 1px solid #e5e5e5;
                    padding: 15rpx 0;
                }

                .w-textarea {
                    width: 100%;
                    height: 150rpx;
                }
            }
        }

        .xieyi-item {
            display: flex;
            align-items: center;

            .text {
                color: #576B95;
                font-size: 26rpx;
                display: flex;
                align-items: center;
            }
        }

        .action {
            margin-top: 30rpx;

            .w-button {
                padding: 10rpx 40rpx;
            }
        }
    }
}

.state-action {
    margin-top: 40rpx;

    .w-button {
        padding: 8rpx 40rpx !important;
        font-size: 28rpx;
    }
}
</style>